<template>
  <div id="web">
    <header>
      <!-- 要么展示用户名、要么展示 登陆/注册 -->
      <p v-if="userInfo.username">{{ userInfo.username }}</p>
      <template v-else>
        <p @click="isMaskShow = true">登陆</p>
        <p @click="isMaskShow = true">注册</p>
      </template>
    </header>

    <main>
      <h2>这是小毛写的文章</h2>

      <div class="para" @copy="copy">今天谁请KFC？</div>
    </main>

    <!-- 
      登陆遮罩层，需要覆盖全屏，并且层级最高 
      1、点击遮罩层，可以关闭遮罩层
      2、点击登陆框，不能关闭遮罩层
    -->
    <div class="loginMask" v-show="isMaskShow" @click="isMaskShow = false">
      <div class="loginMenu" @click.stop>
        <input type="text" v-model="loginInfo.username" placeholder="请输入用户名" />
        <input type="password" v-model="loginInfo.password" placeholder="请输入密码" />
        <button @click="login">登陆</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        username: '',
        password: ''
      },
      loginInfo: {
        username: '',
        password: ''
      },
      isMaskShow: false
    }
  },
  methods: {
    copy(e) {
      //  当用户复制文本后，要干什么？
      //    判断用户是否有登陆，如果登陆，可以复制
      //    如果未登陆，首先提示用户去登陆，然后弹出登陆层

      if (!this.userInfo.username) {
        alert('请登陆后再复制')
        //  阻止用户复制
        e.returnValue = false
        //  弹出登陆层
      } else {
        alert('复制成功')
      }
    },
    login() {
      //  如果用户名和密码不为空，即登陆成功
      if (!this.loginInfo.username || !this.loginInfo.password)
        return alert('请输入正确的用户名和密码')

      alert('登陆成功')

      this.userInfo.username = this.loginInfo.username
      this.userInfo.password = this.loginInfo.password
      //  登陆成功后，关闭登陆弹窗
      this.isMaskShow = false
    }
  }
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

#web {
  width: 100vw;
  height: 100vh;

  header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 6vh;
    padding-right: 10px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);

    p {
      padding: 0 10px;
      transition: color 0.1s;

      &:active {
        color: grey;
      }
    }
  }

  main {
    padding: 10px 20px;

    .para {
      margin-top: 20px;
    }
  }

  .loginMask {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);

    .loginMenu {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 70vw;
      height: 70vh;
      padding: 20px 40px;
      box-sizing: border-box;
      border-radius: 10px;
      box-shadow: 0 0 7px 3px #fff;
      background-color: #fff;

      input {
        margin: 10px 0;
        padding: 10px 20px;
        border-radius: 10px;
        border: none;
        outline: none;
        box-shadow: 0 0 5px 0px lightgray;
        transition: all 0.3s;

        &:focus {
          box-shadow: 0 0 5px 3px grey;
        }
      }

      button {
        margin-top: 20px;
        padding: 5px 20px;
        box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.8);
      }
    }
  }
}
</style>
